<template>
  <div class="role-list job-information">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="authority-title">
      <h2>职业供求分析</h2>
      <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
        <path :d="svgPath.closeFullScreen"/>
      </svg>
      <div class="top-right" @click="goBack"> 返回 </div>
    </div>

    <!-- 表格主体 -->
    <div class="role-list-content" style="position:relative;">
      <!-- 头部筛选 -->
      <div class="role-list-search" style="background: linear-gradient(90deg, #23313c 0%, #1e2f43 50%, #1f304e 100%)">
        <div class="search-content">
          <input class="dap-input" type="text" v-model="searchName" maxlength="30" placeholder="搜索单位名称/职业名称">
          <div class="top-select-item quxiang-select">
            <single-list-filter-without-cb ref="refSalary" @confirmSingleSelect="salaryFun"></single-list-filter-without-cb>
          </div>
          <div class="top-select-item">
            <single-list-filter-without-cb ref="refJiuYeMonth" @confirmSingleSelect="jiuYeMonthFun"></single-list-filter-without-cb>
          </div>
          <div class="search-btn">
            <span class="dap-button" @click="searchItem">搜索</span>
          </div>
          <div class="search-btn">
            <span style="margin-left:18px;" class="dap-close-button" :class="canReset?'canReset':''" @click="reset">重置</span>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="role-list-table">
        <div class="table-title"></div>
        <div class="table-content">
          <el-table
            :data="tableData"
            v-loading="loadingShow"
            element-loading-text="loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            height="10">
            <el-table-column
              prop="number"
              width="60px"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="companyName"
              label="单位名称"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="jobName"
              label="职位名称"
              :show-overflow-tooltip="true"
              align="center">
            </el-table-column>
            <el-table-column
              prop="jobDescribe"
              label="职位说明"
              :show-overflow-tooltip="true"
              align="center">
            </el-table-column>
            <el-table-column
              prop="recruitCount"
              label="招聘人数"
              :show-overflow-tooltip="true"
              align="center">
            </el-table-column>
            <el-table-column
              prop="contactNumber"
              label="联系电话"
              :show-overflow-tooltip="true"
              align="center">
            </el-table-column>
            <el-table-column
              prop="pSex"
              label="性别"
              align="center">
            </el-table-column>
            <el-table-column
              prop="monthlySalary"
              label="月工资"
              :show-overflow-tooltip="true"
              align="center">
            </el-table-column>
            <el-table-column
              prop="jobAddress"
              label="工作地点"
              :show-overflow-tooltip="true"
              align="center">
            </el-table-column>
            <el-table-column
              prop="jobYearLimit"
              label="工作年限"
              align="center">
            </el-table-column>
            <el-table-column
              prop="handleTime"
              label="经办日期"
              align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--分页-->
      <dap-page :pageTotal="total" v-on:pageSizeChange="pageSizeChange" v-on:pageCurrentChange="pageChange" :currentPage="currentPage"></dap-page>
    </div>
  </div>
</template>
<script>
  import {getDepartmentList,getSearchItems,baseApiF,jobInformation} from '../../../api/api'
  import {svgPath,quitFullScreen} from '../../../assets/js/utils'
  import {filterLogText} from '../../../api/authority'
  import dapPage from '../../view/dap-page.vue';

  // 下拉框
  import SingleListFilterWithoutCb from "../../last/filter/single-list-filter-without-checkbox";


  export default {
    props: ['isChange','fullScreen'],
    data () {
      return {
        canReset:true,
        svgPath:svgPath,
        canShow: true,
        searchName: '',
        tableData: [],
        totalData:[],
        currentPage: 1,
        pageSize: 20,
        total: 0,
        loadingShow:true,
        showFloating: false,
        areaTitle: '',
        hospNameTitle: '',
        medicalCategoryNameTitle: '',
        filter: null,
        propParams: {}, // 传递过来的参数


        salary:[],
        salarySele:"",
        jiuYeMonth:[],
        jobTime:"",
      }
    },
    components: {
      dapPage,
      SingleListFilterWithoutCb,
    },
    watch: {
      isChange () {
        if (document.querySelector('.el-header')) {
          this.canShow = true;
        } else {
          this.canShow = false;
        }
      },
      searchName(val){
        this.resetBtn();
      }
    },
    mounted () {
      this.initData();
    },
    methods: {
      // 取消全屏
      closeAll () {
        quitFullScreen();
      },
      getData(){
        this.loadingShow = true;
        let data={
          "edu": "",
          "month": this.jobTime,
          "name": this.searchName,
          "pageNum": this.currentPage,
          "pageSize": this.pageSize,
          "salary": this.salarySele,
          "year": "",
        };
        jobInformation(data).then(res=>{
          if(res.code==0){
            let data = res.data;
            data.list.map((item,index)=>{
              item.number =this.currentPage * this.pageSize - this.pageSize + index + 1;
              item.pSex=item.pSex==1?"男":item.pSex==2?"女":"未知";
            })
            this.totalData = data.list;
            this.tableData = data.list;
            this.total = data.total;
            this.loadingShow = false;
          }else{
            this.totalData = [];
            this.tableData = [];
            this.total = 0;
            this.loadingShow = false;
          }
        }).catch(res=>{
          this.totalData = [];
          this.tableData = [];
          this.total = 0;
          this.loadingShow = false;
        })
      },
      searchItem () {
        this.currentPage = 1;
        this.getData()
      },

      // 初始化数据
      initData () {
        // 初始化数据
        let data = this.$route.query;
        this.propParams = data;
        let year = data.year
        //获取筛选数据
        getSearchItems('init/initInput')
          .then((res) => {
            if (res.code == 0) {
              this.getData()
            }
          });


        // 头部下拉
        this.salary.push({ selectId: "", selectName:"月工资" });
        let salaryArr=["1570-1999元","2000-2999元","3000-3999元","4000-4999元","5000-6999元","7000-9999元","1万元以上","面议","未说明工资"];
        salaryArr.forEach((item) => {
          this.salary.push({ selectId: item, selectName: item });
        });
        this.$refs.refSalary.setSingleListData(this.salary);

        this.jiuYeMonth.push({ selectId: "", selectName: "经办月份" });
        let month=12;
        if(year==new Date().getFullYear()){
          month=new Date().getMonth()+1;
        }
        for(let i=1;i<=month;i++){
          let monthStr=(i+100+"").substr(1,2);
          let yearMonth=year+"-"+monthStr;
          this.jiuYeMonth.push({ selectId: yearMonth, selectName: yearMonth });
        }
        this.$refs.refJiuYeMonth.setSingleListData(this.jiuYeMonth);
      },
      goBack () {
        sessionStorage.setItem('isPrev','1');
        this.$router.go(-1);
      },

      //重置按钮
      resetBtn(){
        if(this.searchName !='' || this.salarySele || this.jobTime){
          this.canReset = false;
        }else{
          this.canReset = true;
        }
      },
      reset(){
        if(this.canReset){
          return;
        }
        this.searchName = '';
        this.salarySele="";
        this.jobTime="";
        this.$refs.refSalary.setCurrentSelectPosition(0);
        this.$refs.refJiuYeMonth.setCurrentSelectPosition(0);
        this.getData();
        this.resetBtn();
      },
      pageSizeChange(val) {
        this.pageSize = val;
        this.getData()
      },
      pageChange(val) {
        this.currentPage = val;
        this.getData()
      },

      salaryFun(item){
        console.log(item);
        this.salarySele=item;
        this.resetBtn();
      },
      jiuYeMonthFun(item){
        this.jobTime=item;
        this.resetBtn();
      },
    }
  }
</script>
<style scoped>
  @import '../../../assets/css/authority.css';
  .user-info-wrapper{
    min-width:400px;
    padding:10px 15px;
  }
  .user-info-wrapper li{
    line-height: 1.8em;
  }
  .user-info-wrapper li span:first-child{
    display: inline-block;
    width:100px;
    text-align: right;
  }
  .canReset{
    color:#969ca5;
    border:#313d4f solid 1px;
    cursor:not-allowed;
  }
  .canReset:hover{
    color:#969ca5;
    border:#313d4f solid 1px;
    background:none;
  }
  .top-right{
    float: right;
    margin-right: 30px;
    font-size: 16px;
    color: #1380e1;
    cursor: pointer;
  }
  .chart-title-floating{
    font-size: 12px;
    color: #fff;
    margin-left: 24px;
    width: 200px;
    line-height: 22px;
    padding: 10px;
    border-radius: 5px;
    background-color: #1a2940;
    border: 1px solid #313d4f;
    position: absolute;
    z-index: 10;
    margin-top: 54px;
  }
  .role-list {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .role-list-content {
    margin: 30px 30px 0 30px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  /*搜索*/
  .role-list-search {
    height: 70px;
    background: linear-gradient(left, #23313c 0%, #1e2f43 50%, #1f304e 100%);
  }

  .role-list-search .search-header {
    height: 60px;
    border-bottom: 1px solid #283f59;
    display: flex;
    align-items: center;
  }

  .role-list-search .search-header > span {
    font-size: 14px;
    color: #9b9aad;
    padding-left: 8px;
  }

  .role-list-search .search-content {
    height: 70px;
    display: flex;
    align-items: center;
  }

  .role-list-search .search-content > span {
    font-size: 12px;
    padding-left: 18px;
    color: #9b9aad;
  }

  .role-list-search .search-content > input {
    margin-left: 10px;
  }

  .role-list-search .search-content .search-btn > span {
    margin-left: 42px;
  }

  /*表格*/
  .role-list-table {
    margin-top: 20px;
    background: #1b2b44;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .role-list-table .table-title {
    height: 15px;
    background: #1b2b44;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .role-list-table .table-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
</style>

<!--修改框架样式-->
<style>
  .item{
    cursor:pointer;
  }
  .popover-text{
    text-align: center;
    padding-top:32px;
    font-weight: normal;
  }
  .toastInfo{
    color:#fff;
  }
  .showTooltip{
    opacity:1;
  }


  /*头部下拉*/
  .job-information .top-select-item{
    margin-left: 1.5%;
  }
  .job-information .top-select-item .left-select-text {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .job-information .top-select-item.quxiang-select  .top-text-wrapper{
    width: 120px;
  }

  .job-information .top-select-item.quxiang-select  .drop-down-wrapper {
    width: 118px;
  }
</style>
